my<template>
  <van-cell class="comment-item">
    <van-image
      slot="icon"
      round
      width="30"
      height="30"
      style="margin-right: 10px;"
      :src="comment.baseUrl + comment.photo"
      @click=" $router.push({name: 'user',params: {userid: comment.userid }})"
    />
    <span
      style="color: #466b9d;"
      slot="title"
    >{{ comment.name }}</span>
    <div slot="label">
      <p style="color: #363636;">{{ comment.content }}</p>
      <p>
        <span style="margin-right: 10px;">{{ comment.publictime  }}</span>
        <span @click="onreplyRecomment(comment._id,comment.name)">回复</span>
        <span
          class="removeComment"
          v-show="$store.state.user.userid===comment.userid"
          @click="removeUserComment(comment.videoid,null,comment._id)"
        >删除</span>

      </p>
    </div>
    <div
      slot="label"
      @click='onRelyShow'
      v-show="comment.childComment.length&&isExpandReplyTextShow"
    >展开{{ comment.childComment.length }}条回复
      <van-icon name="diamond" />
    </div>
    <div
      slot="label"
      v-show="isRelyShow"
    >
      <div class="content">
        <van-cell
          class="comment-item"
          v-for="(childComment,index) in currentVideoCommentList"
          :key='childComment._id'
        >
          <van-image
            slot="icon"
            round
            width="30"
            height="30"
            style="margin-right: 10px;"
            :src=" childComment.baseUrl +childComment.photo"
            @click=" $router.push({name: 'user',params: {userid: childComment.userid }})"
          />
          <span
            style="color: #466b9d;"
            slot="title"
          >{{ childComment.name }}</span>
          <div slot="label">
            <p style="color: #363636;">{{ childComment.content }}</p>
            <p>
              <span style="margin-right: 10px;">{{ childComment.publictime}}</span>
              <span @click="onreplyRecomment(comment._id,childComment.name,1)">回复</span>
              <span
                class="removeComment"
                v-show="$store.state.user.userid===childComment.userid"
                @click="removeUserComment(null,comment._id,childComment._id)"
              >删除</span>

            </p>
          </div>
          <div
            slot="right-icon"
            class="like-container"
          >
            <van-icon
              :color="childComment.isLike? '#e5645f' : ''"
              :name="childComment.isLike ? 'good-job' : 'good-job-o'"
              @click="onCommentLike(childComment,index)"
            />
            <span>{{ childComment.likeNum ? childComment.likeNum : '赞' }}</span>
          </div>
        </van-cell>
      </div>
      <div
        class="closeReply"
        @click="onRelyShow"
        v-show="isMoreCommentShow"
      >
        点击查看更多
        <van-icon name="arrow-down" />
      </div>
      <div
        class="closeReply"
        @click="onCloseReply"
        v-show="closeReply"
      >
        收起
        <van-icon name="arrow-up" />
      </div>
    </div>
    <div
      slot="right-icon"
      class="like-container"
    >
      <van-icon
        :color="comment.isLike ? '#e5645f' : ''"
        :name="comment.isLike ? 'good-job' : 'good-job-o'"
        @click="onCommentLike(comment)"
      />
      <span>{{ comment.likeNum ? comment.likeNum : '赞' }}</span>
    </div>
  </van-cell>
</template>

<script>
// import {
//   addCommentLike,
//   deleteCommentLike
// } from '@/api/comment'
import { getReplyComment } from '@/api/video'
import { onLikeComment, removeuserlikecomment, removeUserComment } from '@/api/user'
import globalBus from '@/utils/global-bus'

export default {
  name: 'CommentItem',
  components: {},
  props: {
    comment: {
      type: Object,
      required: true
    },
    reply: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      isRelyShow: false,
      isExpandReplyTextShow: true,
      currentVideoCommentList: [],
      currentCommentPage: 0,
      isMoreCommentShow: false,
      closeReply: false
    }
  },
  computed: {

  },
  watch: {
  },

  created () {
  },
  methods: {
    async onCommentLike (comment, index) {
      try {
        // 如果已经赞了则取消点赞
        if (!comment.isLike) {
          const res = await onLikeComment(this.$store.state.user.userid, { commentid: comment._id })
          if (res.data.meta.status === 200) {
            if (index !== undefined) {
              this.currentVideoCommentList[index].likeNum++
              this.currentVideoCommentList[index].isLike = true
            } else {
              this.comment.isLike = true
              this.comment.likeNum++
            }
          }
        } else {
          const res = await removeuserlikecomment(this.$store.state.user.userid, { commentid: comment._id })
          if (res.data.meta.status === 200) {
            if (index !== undefined) {
              this.currentVideoCommentList[index].likeNum--
              this.currentVideoCommentList[index].isLike = false
            } else {
              this.comment.isLike = false
              this.comment.likeNum--
            }
          }
        }
      } catch (err) {
        this.$toast.fail('操作失败')
      }
    },

    async onRelyShow () {
      this.currentCommentPage++
      const res = await getReplyComment(this.comment._id, this.currentCommentPage)
      this.currentVideoCommentList.push(...res.data.data)
      this.loading = false
      if (!res.data.data.length) {
        this.isMoreCommentShow = false
        this.closeReply = true
        return
      }
      this.isRelyShow = true
      this.isExpandReplyTextShow = false
      this.isMoreCommentShow = true
    },
    onreplyRecomment (commentid, name, type) {
      this.$emit('onreplyRecomment', commentid, name, type)
    },
    onCloseReply () {
      this.isRelyShow = false
      this.closeReply = false
      this.isExpandReplyTextShow = true
      this.currentCommentPage = 0
      this.currentVideoCommentList = []
    },
    onLikeComment (commentid) {
      alert(commentid)
    },
    async removeUserComment (videoid, commentid, removeCommentid) {
      this.$dialog
        .confirm({
          title: '删除评论',
          color: '#000'
        })
        .then(async () => {
          // 确认执行这里
          try {
            this.$toast.loading({
              duration: 0, // 持续时间，0表示持续展示不停止
              forbidClick: true, // 是否禁止背景点击
              message: '删除中...' // 提示消息
            })
            await removeUserComment(this.$store.state.user.userid, { videoid, commentid, removeCommentid })
            this.$emit('onUpdateComment')
            globalBus.$$emit('comment-update', 0)
            this.$toast.success('删除成功')
          } catch (error) {
          }
        })
        .catch(() => {
          // 取消执行这里
        })
    }
  }
}

</script>

<style scoped  lang="less">
.comment-item {
  display: flex;
  align-items: flex-start;
}

.like-container {
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
}
.van-cell {
  background-color: #fff !important;
}
.textarea {
  color: #000;
}
/deep/.van-field__control {
  color: #323233 !important;
}
.removeComment {
  padding-left: 10px;
  right: 0px;
  color: red;
}
</style>
